<template>
  <div class="wrapper">
    <div class="video-box">
      <div
        ref="player"
        crossorigin="anonymous"
        style="width: 100%; height: 100%"
      ></div>
    </div>
  </div>
</template>

<script>
import Clappr from 'clappr'

export default {
  components: {},
  props: {},
  data() {
    return {
      player: null,
      // 直播地址
      src: 'https://aq.zhslapp.com:20103/live/cameraid/1000152%240/substream/1.m3u8'
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.init()
  },
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    init() {
      // 加载播放器
      this.player = new Clappr.Player({
        parent: this.$refs.player,
        source: this.src,
        width: '100%',
        height: '100%',
        events: {
          onStop: () => {
            // 视频播放停止的回调
            this.$emit('onStop')
          }
        }
      })
      this.player.play()
    }
  },
  filters: {}
}
</script>
<style scoped lang="scss">
.wrapper {
  .video-box {
    width: 425px;
    height: 250px;
    border: 1px solid #ccc;
    margin: auto;
  }
}
</style>
